<template>
    <div class="home">
        <!-- 头部 -->
        <div class="home-top">
            <!-- <div>请输入车牌号</div> -->
            <!-- <div class="inputs">
                <van-password-input style="margin-left:0"
                                    @click="inputbtn"
                                    :value="value3"
                                    :length="1"
                                    :mask="false" />
                <van-password-input style="margin-left:0"
                                    @click.stop="inputbtn2"
                                    :value="value2"
                                    :length="1"
                                    :mask="false" />
                <span style="display:block">•</span>
                <van-password-input :value="value"
                                    @focus="showKeyboard = true"
                                    :gutter="8"
                                    :length="5"
                                    :mask="false" />
                <van-number-keyboard :show="showKeyboard"
                                     @input="onInput"
                                     @delete="onDelete"
                                     @blur="showKeyboard = false" />
            </div> -->
            <Keyboards @sendCarNumber="getcrNumber"></Keyboards>
            <!-- <van-button type="warning"
                        @click="palybtn">立即缴费</van-button> -->
        </div>
        <!-- 身体 -->
        <div class="text">
            <div class="text-no1">宅-智能停车说明</div>
            <div>
                <p>1.{{info.name}}小区停车场收费标准：停车{{info.duration}}小时，收费{{info.money}}元,超出部分按{{info.amount}}元/小时收费。</p>
                <p>2.请于缴费后15分钟离场，15分钟后将重新开始计费。</p>
            </div>
        </div>

        <div class="imgbox">
            <img :src="imgUrl"
                 alt />
        </div>
    </div>
</template>

<script>
import {
    Toast
} from 'vant'
import Vue from 'vue';
Vue.use(Toast);
import Keyboards from '../components/carNumber.vue'  //引入组件
import { getCode,getUserinfo,getcalculate
} from '../api/api.js'
export default {
 components:{Keyboards},
  data () {
    return {
      value: '',
      value2: '',
      value3: '',
      imgUrl: require("../assets/imgs/01.png"),
      showKeyboard: false,
      carNumber:'',
      info:{},//基本信息
      community_id:""
    };
  },
  created(){
      this.community_id=this.get_url_val('community_id')
      this.getCode()
      this.userInfo(this.get_url_val('community_id'))
          
  },
  methods: {
    get_url_val(name) {
        // 未传参，返回空
        if (!name) return null;
        // 查询参数：先通过search取值，如果取不到就通过hash来取
        var after = window.location.search;
        after = after.substr(1) || window.location.hash.split('?')[1];
        // 地址栏URL没有查询参数，返回空
        if (!after) return null;
        // 如果查询参数中没有"name"，返回空
        if (after.indexOf(name) === -1) return null;

        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        // 当地址栏参数存在中文时，需要解码，不然会乱码
        var r = decodeURI(after).match(reg);
        // 如果url中"name"没有值，返回空
        if (!r) return null;

        return r[2];
    },
      async userInfo(id){
          const data =await getUserinfo({
              sn:"",
              community_id:id
          })
    this.info=data.data
      },
      async getCode(){
          const data =await getCode({
              redirect_uri:window.location.href
          })
          console.log(data,"555666")
          console.log(window.location.href,"5555555555")
      },
      async getcrNumber(val) {
   const carNumberReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/
   if (carNumberReg.test(val)) {
     this.showKeyboards = false
     this.carNumber = val
    console.log( this.carNumber,"车牌号")
    const data =await getcalculate({
        sn:'',
        community_id:this.community_id,
        license:this.carNumber,
    })
    if(data.status=='success'){
    if(data.data.price){
            Toast.fail('无需缴费')
        }else{
            localStorage.setItem('infoPay',JSON.stringify(data.data))
            this.$router.push({
                path:"/payment",
            })
        }
    }
  
   }
 },
    onInput (key) {
      this.value = (this.value + key).slice(0, 5);
    },
    onDelete () {
      this.value = this.value.slice(0, this.value.length - 1);
    },

    inputbtn () {
      console.log(1111);
    },
    inputbtn2 () {
      console.log(2222);
    },
    palybtn () {
      this.$router.push('/payment')
    }
  },
}
</script>

<style lang="less" scoped>
.home {
	height: 100%;
	width: 100%;
	padding: 4%;
	box-sizing: border-box;
	.home-top {
		height: 40%;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		.inputs {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin: 0 !important;
			// /deep/input {
			//   width: 1.5em;
			//   height: 2em;
			//   border: 1px solid #ccc;
			//   margin-right: 1em;
			//   padding: 1em;
			// }
			.van-password-input {
				margin: 0;
			}
		}
		button {
			width: 80%;
			background: rgba(251, 125, 82, 1);
			border-radius: 8px;
		}
		li {
			border-radius: 0.2em;
			width: 1.5em;
			height: 2em;
			border: 1px solid #ccc;
		}
	}
	.text {
		margin: 10% 0;
		padding: 0 8%;
		.text-no1 {
			width: 100%;
			text-align: center;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 4%;
		}
		div {
			p {
				color: rgba(102, 102, 102, 1);
				font-size: 12px;
				margin-bottom: 2%;
			}
		}
	}
	.imgbox {
		width: 100%;
		height: 20%;
		text-align: center;
		img {
			width: 90%;
			height: 100%;
			border: dashed 1px #ccc;
		}
	}
}
</style>